<template>
	<gracePage headerBG="#F4F4F4" class="main-bodybg-color">
		<view slot="gHeader">
			<view class="grace-header-body grace-relative main-bodybg-color">
				<text class="grace-header-icons your-icon iconxiangzuo font-size-34" style="" @tap="appFn.navigateBackFn"></text>
				<!-- 中间内容 -->
				<view class="grace-header-content-noflex py-1-5 px-3 text-center"><text class="grace-h4 font-size-36 text-center" style="font-size:36rpx;">提现记录</text></view>
				<!-- 消息按钮 -->
				<view class="grace-header-icons font-size-24 "></view>
			</view>
		</view>
		<view slot="gBody" class="grace-bg-white">
			<!-- 全屏 Loading -->
			<graceFullLoading :graceFullLoading="graceFullLoading" logoUrl="/static/images/lodingbg.png"></graceFullLoading>
			<view v-if="lists.length == 0" class="main-bodybg-color">
				<graceEmptyNew>
					<view slot="img" class="empty-view">
						<!-- 请根据您的项目要求制作并更换为空图片 -->
						<image class="empty-img" mode="widthFix" src="/static/images/loding.png"></image>
					</view>
					<text slot="text" class="grace-text-small grace-gray">暂无记录</text>
				</graceEmptyNew>
			</view>
			<scroll-view
				v-else
				scroll-y="true"
				@touchend="touchend"
				:show-scrollbar="false"
				>
				<view class="grace-list-items mr-3" :class="{'animate1':!graceFullLoading}" v-for="(item, index) in lists" :key="index">
					<!-- <view class="grace-list-image"><image class="grace-list-image" src="https://graceui.oss-cn-beijing.aliyuncs.com/faces/2.png" mode="widthFix"></image></view> -->
					<view class="grace-list-body">
						<view class="grace-list-title">
							<text class="grace-list-title-text" style="font-size: 28px;">提现金额</text>
							<text class="grace-list-title-desc" style="font-size: 32rpx;">{{item.amount}}</text>
						</view>
						<view class="grace-list-title">
							<text class="grace-list-title-text grace-black9">{{item.add_time}}</text>
							<text class="grace-list-title-desc " :class="{'main-font-color':item.is_paid == '0','grace-green':item.is_paid == '1','grace-red':item.is_paid == '3'}" style="font-size: 24rpx;">{{item.status}}</text>
						</view>
						<view class="grace-list-title" v-if="item.is_paid == '3'">
							<text class="grace-list-title-text grace-black9">审核备注</text>
							<text class="grace-list-title-desc " >{{item.admin_note}}</text>
						</view>
						<!-- <view class="grace-list-body-desc">描述信息</view> -->
					</view>
				</view>
				<graceLoading :loadingType="loadingType"></graceLoading>
			</scroll-view>
		</view>
	</gracePage>
</template>
<script>
import gracePage from '@/graceUI/components/gracePage.vue';
import graceLoading from '@/graceUI/components/graceLoading.vue';
import graceEmptyNew from "@/graceUI/components/graceEmptyNew.vue";
import graceFullLoading from "@/graceUI/components/graceFullLoading.vue";

export default {
	data() {
		return {
			pages: 1,
			page:1,
			loadingType: 3,
			lists:[],
			// 全屏加载
			graceFullLoading: false,
		};
	},
	
	onLoad: function() {
		
		this.init();
	},
	
	methods: {
		init() {
			// if(this.pages > this.page){
			// 	this.loadingType = 2;
			// 	return;
			// }
			// this.loadingType = 1;
			// let options = {
			// 	act: 'withdraw_list',
			// 	page: this.pages
			// };
			// this.$HTTP.post('/api/api.php', options, { token: true }).then(data => {
			// 	console.log('data', data);
			// 	this.lists = this.lists.concat(data.list);
			// 	this.page = parseInt(data.page);
			// 	if(data.page != '1'){ this.loadingType = 0;}
			// 	this.pages ++;
			// 	this.graceFullLoading = false;
			// });
		},
		touchend(){
			this.init();
			// console.log(45789)
		}
	},
	components: { gracePage, graceLoading ,graceFullLoading ,graceEmptyNew}
};
</script>
<style scoped>
	@import "@/graceUI/animate.css";
	.animate1{animation:fadeIn 1s linear;}
	.empty-view{width:280rpx; height:280rpx; border-radius:280rpx;  margin-top:300rpx;}
	.empty-img{width:220rpx; height:200rpx; margin:40rpx; }
</style>
